<template>
	<view>
		<scroll-view v-if="isShow" scroll-x class="bg-cyan nav text-center">
			<view class="cu-item" :class="0==TabCur?'text-white cur':''" @tap="tabSelect" data-id="0">
				<text class="cuIcon-pullleft"></text> 新通知
			</view>
			<view class="cu-item" :class="1==TabCur?'text-white cur':''" @tap="tabSelect" data-id="1">
				<text class="cuIcon-pullright"></text> 历史通知
			</view>

		</scroll-view>

		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-h">
			<view class="cu-chat">
				<view v-if="flag">
					<view style="margin-top: 80px;margin-bottom: 10px;margin-left: 140px">
						<image style="width: 110px; height: 110px;" src="@/static/icons/nodata.png"></image>
					</view>
					<view><text style="color: #A9A9A9; font-size: 14px; margin-left: 118px;">技术咨询：18214376259</text>
					</view>
				</view>
				<view v-for="(item,index) in replyMessage" :key="index" class="cu-item self">
					<view class="main">
						<view class="content .bg-blue shadow">
							<text>{{item.message}}</text>
						</view>
					</view>
					<view class="cu-avatar radius">
						<image style="width: 60px; height: 40px;" :src="item.avatar">
						</image>
					</view>
					<view class="date">{{item.currentTime}}</view>
				</view>
			</view>
		</scroll-view>

		<!-- 发送框 -->
		<view v-if="isAdmin" class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view>
			<input v-model="message" class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300"
				cursor-spacing="10" @focus="InputFocus" @blur="InputBlur" />
			<view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view>
			<button @click="sendSocketMessage(message)" class="cu-btn bg-green shadow">发送</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getHistoryMessage,
		getHistoryMessageByOneself,
		sendMessage,
		getMessage,
		getNewMessage
	} from '@/api/chat.js';
	import {share} from '@/utils/share.js';

	const isAdmin = ref(false);
	const replyMessage = ref([]);
	const flag = ref(false);
	const isShow = ref(true);
	onLoad(() => {
		share();
		const userInfo = uni.getStorageSync('user');
		const name = userInfo.name;
		if ((userInfo.role === '管理员') || (userInfo.role === '主管')) {
			isAdmin.value = true;
			isShow.value = false;
			//获取自己发布过的通知历史
			getHistoryMessageByOneself(userInfo.id).then(res => {
				if (res.code === 200) {
					replyMessage.value = res.data;
					if ((res.data === null) || (res.data === [])) {
						flag.value = true;
					} else {
						flag.value = false;
					}
				}
			})
		} else {
			//非管理员或者主管则查询对应主管和管理员发过的新通知信息
			console.log("初始新通知")
			getNewMsg(userInfo.id);
		}
	});

	const message = ref('');
	//发送消息
	function sendSocketMessage(msg) {
		if (msg === '') {
			uni.showToast({
				title: '无法发送空白消息',
				icon: 'error'
			})
		} else {
			const userInfo = uni.getStorageSync('user');
			const msgBody = {
				message: '',
				avatar: '',
				id: null
			};
			msgBody.message = msg;
			msgBody.avatar = userInfo.avatar;
			msgBody.id = userInfo.id;
			console.log(userInfo.id);
			sendMessage(msgBody).then(res => {
				if (res.code === 200) {
					//说明已经存到redis中了
					getMessage(userInfo.id).then(res => {
						if (res.code === 200) {
							replyMessage.value.push(res.data);
						}
					})
				}
			})
			message.value = '';
		}
	};

	const InputBottom = ref(0);

	function InputFocus(e) {
		InputBottom.value = e.detail.height;
	};

	function InputBlur(e) {
		InputBottom.value = 0;
	};
	const scrollTop = ref(0);
	const TabCur = ref(0);
	const scrollLeft = ref(0);

	function tabSelect(e) {
		const userInfo = uni.getStorageSync('user');
		TabCur.value = e.currentTarget.dataset.id;
		scrollLeft.value = (e.currentTarget.dataset.id - 1) * 60
		console.log(TabCur.value);
		if (TabCur.value === '0') {
			//获取新通知
			console.log("获取新通知")
			getNewMsg(userInfo.id);
		}
		if (TabCur.value === '1') {
			//获取历史通知
			console.log("获取历史通知")
			getOldMsg(userInfo.id);
		}
	};

	//获取新通知
	function getNewMsg(id) {
		getNewMessage(id).then(res => {
			if (res.code === 200) {
				replyMessage.value = res.data;
				if (res.data === null) {
					flag.value = true;
				} else {
					flag.value = false;
				}
			}
		})
	};

	//获取历史通知
	function getOldMsg(id) {
		getHistoryMessage(id).then(res => {
			if (res.code === 200) {
				replyMessage.value = res.data;
				if (res.data === null) {
					flag.value = true;
				} else {
					flag.value = false;
				}
			}
		})
	};
</script>

<style scoped lang="scss">
	.scroll-h {
		height: 775px;
	}
</style>